<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
    <meta charset="UTF-8">
    <title>文明创建</title>
    <meta name="page-view-size" content="1280*720">
    <link rel="stylesheet" href="../css/base.css">
    <script type="text/javascript" src="../lib/js/evm.js"></script>
    <script type="text/javascript" src="../lib/js/Evm_djyw.js"></script>
    <script type="text/javascript" src="../lib/js/key.js"></script>
    <script src="../lib/js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../lib/js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/api.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/public.js" type="text/javascript" charset="utf-8"></script>
    <style>
        .culture-bg {
            width: 1280px;
            height: 720px;
            position: relative;
            top: 0;
            left: 0;
            background: url(../images/bg.png) no-repeat left top;
        }

        .nav-bg {
            width: 1120px;
            height: 60px;
            position: absolute;
            top: 130px;
            left: 80px;
            /* padding:0 00px 0 60px; */
        }

        .nav {
            width: 100%;
            height: 100%;
            color: #F99F26;
            font-size: 28px;
            text-align: center;
            line-height: 40px;
            float: left;
        }

        .list-bg {
            position: absolute;
            padding: 15px;
            top: 207px;
            left: 80px;
            width: 1120px;
            height: 467px;
            background: rgba(39, 79, 193, .1);
            border-radius: 10px;
            box-sizing: border-box;
        }

        .list-con {
            width: 100%;
            box-sizing: border-box;
            overflow: hidden;
        }

        .list-con>h1 {
            text-align: center;
            width: 100%;
            line-height: 280px;
            font-size: 55px;
            color: #f2f2f2;
        }

        .focus_menu {
            background: url('../images/title-active.png') no-repeat bottom center;
            /* background-size: 96%; */
            color: #EB4848;
        }

        .list-img {
            display: block;
            width: 100%;
            height: 100%;
        }

        .list-row {
            margin-bottom: 10px;
            width: 100%;
            height: 93px;
            box-sizing: border-box;
            float: left;
            overflow: hidden;
            color: #333;
            font-size: 22px;
            border-radius: 10px;
            box-sizing: border-box;
            border: 3px solid transparent;
        }

        .list-row>.listImgBar {
            display: block;
            float: left;
            width: 136px;
            height: 76px;
            margin: 5px 8px 0 9px;
        }

        .list-row>.list-message {
            display: block;
            float: left;
            width: 900px;
            height: 76px;
            margin: 9px 0 0 9px;
            font-size: 30px;
            /* border: 1px solid red; */
        }

        .list-row .list-brief {
            font-size: 18px;
            color: white;
            width: 100%;
            height: 20px;
            line-height: 63px;
        }

        .list-row .list-brief>p:first-child {
            width: 80%;
            float: left;
            white-space: nowrap;
            overflow: hidden;
            display: none;
            text-overflow: ellipsis;
        }

        .list-row .list-brief>p:last-child {
            width: 20%;
            float: right;
            text-align: right;
        }

        .list-video,
        .list-cur {
            width: 260px;
            height: 194px;
            float: left;
            color: #fff;
            box-sizing: border-box;
            text-align: center;
            border: 3px solid transparent;
            margin: 2px 0px 10px 10px;
            position: relative;
            font-size: 22px;
        }

        .list-cur>p>span:first-child {
            display: block;
            float: left;
            width: 70%;
            margin-right: 2%;
        }

        .list-cur>p>span:last-child {
            display: block;
            float: right;
            width: 10%;
            margin-right: 2%;
        }

        .curActive {
            border: 3px solid red;
        }

        .list-book {
            width: 325px;
            height: 194px;
            float: left;
            background-color: #fff;
            box-sizing: border-box;
            /* text-align: center; */
            margin: 2px 19px 15px 19px;
            position: relative;
            font-size: 18px;
            border: 2px solid transparent;
        }

        .list-book>p {
            line-height: 40px;
            margin-left: 7px;
        }

        .list-book.active {
            border: 2px solid lightgreen;
        }


        .list-book>.listImgBar {
            width: 95%;
            height: 149px;
            margin: 5px 0 0 7px;
        }

        .list-video>.listImgBar,
        .list-cur>.listImgBar {
            display: block;
            float: left;
            width: 100%;
            height: 100%;
        }

        .list-video.active,
        .list-cur.active {
            border: 5px solid lightgreen;
        }

        .list-video>p,
        .list-cur>p {
            color: #333;
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 40px;
            background: rgba(255, 255, 255, 1);
            line-height: 40px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            border-radius: 0px 0px 4px 4px;
            z-index: 666;
        }

        .list-video>.listPlay,
        .list-cur>.listPlay {
            position: absolute;
            z-index: 555;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: rgba(0, 0, 0, .2)
        }

        .listPlay>img {
            position: absolute;
            display: block;
            height: 60px;
            width: 60px;
            top: 0;
            left: 0;
            /* margin-top: -40px; */
            /* margin-left: -20px; */
        }

        .list-row.active,
        .list-data.active {
            border: 3px solid lightgreen;
        }

        .cur {
            margin-top: 5px;
        }

        .list-model {
            width: 380px;
            height: 280px;
            float: left;
            margin: 70px 70px 10px 80px;
            border: 3px solid transparent;
        }

        .list-model.active {
            border: 3px solid red;
        }

        /* 志愿活动 */
        .list-activity {
            height: 93px;
            width: 515px;
            /* background: #fff; */
            float: left;
            position: relative;
            border-radius: 10px;
            margin: 0 10px 10px 10px;
            border: 3px solid transparent;
            border-bottom: 1px dashed white;
        }

        .list-activity>img {
            width: 135px;
            height: 70px;
            float: left;
            /* border: 1px solid; */
            margin: 7px;
        }

        .list-activity>div:nth-child(2) {
            font-size: 26px;
            color: white;
            line-height: 38px;
            width: 315px;
            height: 75px;
            /* border: 1px solid; */
            float: left;
            margin-top: 5px;
            margin-left: 10px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .list-activity>div:nth-child(3) {
            width: 35px;
            height: 75px;
            /* border: 1px solid; */
            float: left;

        }

        .list-activity.active {
            /* border: 3px solid lightgreen; */
            background-color: #FF861F;
            color: white !important;
        }



        .list-activity>span.curActive {
            border: 3px solid red;
        }
    </style>
</head>

<body>
    <div class="culture-bg" id="cultureMain">
        <ul class="nav-bg" id="nav-bg">

        </ul>
        <div class="list-bg">
            <div class="list-con" id="list-con"></div>
            <p class="page-show"><span id="now_page">0</span>/<span id="total_page">0</span>
            </p>
        </div>

    </div>

    </div>

</body>
<script>
    var modelIndex = {
        index: 0, //导航栏初始位置
        menuKey: '',
        menuPageSize: 4, //导航栏模块数量
        pageSize: 1, //主模块数量
        type: '',
        crumbs: '文明创建',
        structure: 2, //上下结构  默认1是左右，2是上下结构
        menuContainerId: 'nav-bg', //包含导航栏模块的标签id
        menuListName: 'nav', //导航栏模块名称class
        mainContainerId: 'list-con', //包含主模块的标签id
        mainlistName: '', //主模块名称
        id: 'culture',
    }

    var leftData = [{
            name: '活动预告', //name
            id: '5', //唯一标识
            type_style: '3', //类别
            size: '8', //数量  
            list_name: 'list-activity', //右侧模块classname
            // is_cur: 'true'
            rowHeight: 4,
        },
        // {
        //         name: '戏之韵', //name
        //         id: '267', //唯一标识
        //         type_style: '1', //类别
        //         size: '4', //数量  
        //         list_name: 'list-row' //右侧模块classname
        //     },
        //     {
        //         name: '幸福舞起来', //name
        //         id: '1011', //唯一标识
        //         type_style: '3', //类别
        //         size: '8', //数量  
        //         list_name: 'list-video', //右侧模块classname
        //     },
        //     {
        //         name: '文化掠影', //name
        //         id: '272', //唯一标识
        //         type_style: '3', //类别
        //         size: '8', //数量  
        //         list_name: 'list-video', //右侧模块classname
        //     },

        // {
        //     name: '我的作品',//name
        //     id: '1007',//唯一标识
        //     type_style: '3',//类别
        //     size: '8',//数量  
        //     list_name: 'list-cur',//右侧模块classname
        //     is_cur: 'true'
        // },
        // {
        //     name: '地方戏曲',//name
        //     id: '1008',//唯一标识
        //     type_style: '3',//类别
        //     size: '8',//数量  
        //     list_name: 'list-video',//右侧模块classname
        // },
        // {
        //     name: '全民阅读',//name
        //     id: '1010',//唯一标识
        //     type_style: '3',//类别
        //     size: '6',//数量  
        //     list_name: 'list-book',//右侧模块classname
        // },

        // {
        //     name: '影音娱乐',//name
        //     id: '9',//唯一标识
        //     type_style: '2',//类别
        //     size: '2',//数量  
        //     list_name: 'list-model',//右侧模块classname
        // }
    ];

    function getMenus(page, number) {
        if (typeof number == 'number') {
            // modelIndex.mainContainerId = leftData[number].list_name;
        }
        left.paint(page, number);
    }

    function getMessage(id, page, pos, index) { //id,类型，页码，上下页，位置
        if (id == 5) {
            var params = {
                category: 6,
                page: page,
                pagesize: modelIndex.pageSize,
            }
            GetDatas('getActivityList', params, function (res, data) {
                var mess = data.data;
                console.log(mess.items, 111111111111)
                var str = '';
                if (mess.items.length) {
                    $('.page-show').css('display', 'block')
                    for (var i = 0; i < mess.items.length; i++) {
                        str += '<div class="' + modelIndex.mainlistName + '" data-id=' + mess.items[i].id +
                            " data-tpe=" + mess.items[i].tpe + " >";
                        if (id == '3') {
                            if (mess.items[i].logo != "") {
                                str += "<img class='list-img' src=" + API_URL.imgURL + mess.items[i].logo + ">"
                            } else {
                                str += '<img src="../images/moren.png" alt="">'
                            }
                            str += '<div class="">"' + mess.items[i].title + '"</div>'
                        } else if (id == '5') {
                            if (mess.items[i].images != "") {
                                str += "<img class='list-img' src=" + API_URL.imgURL + mess.items[i].images +
                                    ">"
                            } else {
                                str += '<img src="../images/moren.png" alt="">'
                            }
                            str += '<div class="">"' + mess.items[i].title + '"</div>'
                            if (mess.items[i].status == '2') {
                                str += '<div><img src="../images/icon-2.png" alt=""></div>'
                            } else if (mess.items[i].status == '1') {
                                str += '<div><img src="../images/icon-1.png" alt=""></div>'
                            } else {
                                str += '<div><img src="../images/icon-0.png" alt=""></div>'
                            }

                        }
                        str += '</div>'
                    }
                } else {
                    str = '<h1>暂无数据</h1>'
                    $('.page-show').css('display', 'none')
                }
                $('#' + modelIndex.mainContainerId).html(str);
                MessOpt(page, mess.totalpage, pos, index);
            })
        } else {
            var params = {
                cid: id,
                page: page,
                pagesize: modelIndex.pageSize,
                month: modelIndex.menuKey || ''
                // area_id: $.cookie('TV_CST_AREA')
            }
            if (id == 9) {
                var str = ''
                for (var i = 0; i < 2; i++) {
                    str += '<div class="' + modelIndex.mainlistName + '" data-id=cultureVideo' + i + " data-tpe=9 >";
                    str += "<img  src=" + '../images/cultureVideo' + i + '.png' + ">";
                    str += '</div>'
                }
                $('#' + modelIndex.mainContainerId).html(str);
                $('.page-show').css('display', 'none')
                MessOpt(1, 1, pos, index);
                return;
            }
            GetDatas('getArticleList', params, function (res, data) {
                var mess = data.data;
                console.log(mess.items)
                var str = '';
                if (mess.items.length && id != 3) {
                    $('.page-show').css('display', 'block')
                    for (var i = 0; i < mess.items.length; i++) {
                        str += '<div class="' + modelIndex.mainlistName + '" data-id=' + mess.items[i].id +
                            " data-tpe=" + mess.items[i].tpe + " >";
                        var img = '';
                        if (mess.items[i].img == '') {
                            img = '../images/base1.jpg'
                        } else {
                            img = API_URL.imgURL + mess.items[i].img
                        }
                        str += '<div class="listImgBar">'
                        str += "<img class='list-img' src=" + img + ">";
                        str += '</div>'
                        if (modelIndex.mainlistName == 'list-video' || modelIndex.mainlistName == "list-cur") {
                            if (mess.items[i].tpe == 5 || mess.items[i].tpe == 4) {
                                str += "<div class='listPlay' ><img src='../images/sp.png'></div>";
                            } else if (mess.items[i].tpe == 1) {
                                str += "<div class='listPlay' ><img src='../images/icon-zixun.png'></div>";
                            } else {
                                str += "<div class='listPlay' ><img src='../images/icon-tuwen.png'></div>";
                            }
                            if (modelIndex.mainlistName == "list-cur") {
                                str += "<p><span class='ell'>" + mess.items[i].title +
                                    "</span><img class='cur' src='../images/goodWhite.png'/><span class='cur-number'>" +
                                    mess.items[i].click_count + "<span></p>";
                            } else {
                                str += "<p>" + mess.items[i].title + "</p>";
                            }
                        } else if (modelIndex.mainlistName == 'list-row') {
                            str += '<div class="list-message"><p class="ell">' + mess.items[i].title + '</p>'
                            str += '<div class="list-brief "><p class="ell">' + mess.items[i].brief +
                                '</p><p>' +
                                mess.items[i].add_time + '</p></div>'
                            str += '</div>'
                        } else {
                            str += "<p class='ell'>" + mess.items[i].title + "</p>";
                        }


                        str += '</div>'
                    }
                } else {
                    str = '<h1>暂无数据</h1>'
                    $('.page-show').css('display', 'none')
                }
                $('#' + modelIndex.mainContainerId).html(str);
                MessOpt(page, mess.totalpage, pos, index);
            })
        }

    }

    function direEnter(status, id, index) {

        if (status == 0) {
            TV.PromptMsg('点赞成功')
            new TV.CookieOpt().clean();
        } else {
            if (id == 9) {
                try {
                    Utility.ioctlWrite("skyworthKey", "Key2VOD");
                } catch (e) {
                    // statements
                    console.log(e);
                }

                if (index == 0) {
                    // console.log('电影在线')
                    window.location.href = 'http://172.20.224.223:6555/theater/'

                } else {
                    // console.log('k歌平台')
                    window.location.href = 'http://172.30.5.138:9090/klok_hd/index_qs.jsp'
                }
                return
            }
            var tpe = $('.active').attr('data-tpe');
            if (id == 5) {
                window.location.href = "activeDetail.html?id=" + $('.active').attr('data-id') + '&show=999';
                return
            }
            if (tpe == 4 || tpe == 5) {
                window.location.href = 'play.html?id=' + $('.active').attr('data-id');
                //window.location.href = 'play-shouye.html';
            } else if (tpe == 1 || tpe == 2 || tpe == 3) {
                if (tpe == 3) {
                    window.location.href = './carrousel.html?id=' + $('.active').attr('data-id')
                    return
                }
                var locaName = tpe == 1 ? 'word' : 'article'
                window.location.href = locaName + 'Detail.html?id=' + $('.active').attr('data-id') + '&type=' + $(
                    '.focus_menu').attr('data-id');
            }
        }


    }
</script>
<script type="text/javascript" src="../js/twoPageList.js"></script>

</html>